<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
        <el-form-item label="案件编号" prop="ajbh">
          <el-input
            v-model="queryParams.ajbh"
            placeholder="请输入案件编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="被取保候审人(被行政拘留人)" prop="hsr">
          <el-input
            v-model="queryParams.hsr"
            placeholder="请输入被取保候审人(被行政拘留人)"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system/bzjtable/export']"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="doubleclick(form)">没收</el-button>
      </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange" @current-change="tableCurrentChange" @row-dblclick="doubleclick">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="Key" align="center" prop="xh" />
        <el-table-column label="案件编号" align="center" prop="ajbh" width="100"/>
        <el-table-column label="案件名称" align="center" prop="ajmc" width="150"/>
        <el-table-column label="案件性质" align="center" prop="ajxz" width="250"/>
        <el-table-column label="收取法律文书号" align="center" prop="sqwsh" width="150"/>
        <el-table-column label="被取保候审人(被行政拘留人)" align="center" prop="hsr" width="200"/>
        <el-table-column label="人员类别" align="center" prop="xjr" width="150"/>
        <el-table-column label="性别" align="center" prop="xb" />
        <el-table-column label="出生日期" align="center" prop="csrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.csrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="住址" align="center" prop="zz" /> -->
        <el-table-column label="户籍地址" align="center" prop="hjdz" width="100"/>
        <!-- <el-table-column label="单位及职务" align="center" prop="dwzw" /> -->
        <el-table-column label="联系电话" align="center" prop="lxdh" width="150"/>
        <el-table-column label="取保候审保证金" align="center" prop="sqje" width="150"/>
        <el-table-column label="收费方式" align="center" prop="sqfs" />
        <el-table-column label="收取状态" align="center" prop="sqzt" >
          <template slot-scope="scope">
          {{ scope.row.sqzt == 0 ? '未收款' : scope.row.sqzt == 1 ? '已收款' : '' }}
        </template>
        </el-table-column>
        <el-table-column label="收取日期" align="center" prop="sqrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办案人" align="center" prop="bar" width="120"/>
        <el-table-column label="办案单位" align="center" prop="badw" width="200"/>
        <el-table-column label="代收银行编号" align="center" prop="dsyhbh" width="220"/>
        <el-table-column label="交纳银行卡号" align="center" prop="jnkh" width="100"/>
        <el-table-column label="批准人" align="center" prop="pzr" />
        <el-table-column label="办案人所在单位编号" align="center" prop="dwbh" width="150"/>
        <el-table-column label="办案单位" align="center" prop="badw" width="200"/>
        <el-table-column label="没收批准人" align="center" prop="mspzr"width="100" />
        <el-table-column label="没收法律文书号" align="center" prop="mswsh" width="150"/>
        <el-table-column label="没收批准时间" align="center" prop="mspzsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.mspzsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="没收日期" align="center" prop="msrq" width="150"/>
        <el-table-column label="没收填报时间" align="center" prop="mstfsj" width="150"/>
        <el-table-column label="没收金额" align="center" prop="msje" />
        <el-table-column label="没收填报人" align="center" prop="mstfr" width="150"/>
        <el-table-column label="没收原因" align="center" prop="msyy" />
        <el-table-column fixed="right" label="操作"  align="center"  width="220" >
          <template slot-scope="scope">
              <el-button type="warning" plain size="mini" @click="handleckfj(scope.row)">查看附件</el-button>
              <el-button type="primary" plain size="mini" @click="handlecklc(scope.row)" >查看流程</el-button>
  
          </template>
        </el-table-column>
      </el-table>

      <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :visible.sync="pdfs" width="45%">
           <div style="display: flex;align-items: center;justify-content: center;">
            <img :src="this.pdfUrl" alt width="80%" />
           </div>
      </el-dialog>
    <el-dialog title="查看附件" :visible.sync="dialogFormVisible">
        <el-table height="600" border :data="fileList" :header-cell-style="{ backgroundColor: 'rgb(237 237 237)'}">
          <el-table-column label="文件名称" prop="fjmc" />
          <el-table-column label="环节" prop="lb" />
          <el-table-column label="文件类型" prop="typeName" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="handlexzfj(scope.row)" :disabled="!scope.row.wjdz" >下载附件</el-button>
              <el-button type="success" plain size="mini" @click="yul(scope.row)" :disabled="!(scope.row.wjdz.split('.')[1] == 'png' || scope.row.wjdz.split('.')[1] == 'jpg' || scope.row.wjdz.split('.')[1] == 'jpeg')" >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="查看流程" :visible.sync="dialogFlowerTable"  @closed="dialogFlowerTable=false">
        <el-table height="600" border :data="flowerList" :header-cell-style="{ backgroundColor: 'rgb(237 237 237)'}">
          <el-table-column label="案件类别" prop="lb" hidden/>
          <el-table-column label="审批环节" prop="ajlx" />
          <el-table-column label="审批意见" prop="spyj" width="200"/>
          <el-table-column label="审批人" prop="spr" />
          <el-table-column label="审批单位" prop="spdw" width="200"/>
          <el-table-column label="审批时间" prop="spsj" width="180"/>
        </el-table>
      </el-dialog>

    <!-- 双击弹窗 -->
        <el-dialog :title="tit" :visible.sync="open" width="45%" @closed="gb">
          <el-form ref="forms" :inline="true" :model="form" :rules="ruless" label-width="120px" class="">
        <el-form-item label="案件编号">
          <el-input v-model="form.ajbh" placeholder="请输入案件编号" :disabled="true" />
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="form.ajmc" placeholder="请输入案件名称" :disabled="true" />
        </el-form-item>
        <el-form-item label="被取保候审人(被行政拘留人)">
          <el-input v-model="form.hsr" placeholder="请输入被取保候审人(被行政拘留人)" :disabled="true" />
        </el-form-item>
        <el-form-item label="人员类别">
          <el-input v-model="form.xjr" placeholder="请输入人员类别" :disabled="true" />
        </el-form-item>
        <el-form-item label="没收法律文书号">
          <el-input v-model="form.mswsh" placeholder="请输入没收法律文书号" />
        </el-form-item>

        <!-- <el-form-item label="没收原因">
          <el-input v-model="form.msyy" placeholder="请输入没收原因" />
        </el-form-item> -->

        <el-form-item label="没收金额" prop="msje">
          <el-input v-model="form.msje" placeholder="请输入没收金额"/>
        </el-form-item>
        <el-form-item label="没收执行日期" prop="mskhsj">
          <el-date-picker clearable v-model="form.mskhsj" type="datetime" value-format="yyyy-MM-dd HH:dd:ss"
            placeholder="请选择没收执行日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="没收操作人员">
          <el-input v-model="form.mskhczr" placeholder="请输入没收操作人员" />
        </el-form-item>

        <el-form-item label="附件选择" prop="files">
          <Upload v-model="form.files" :data="{}" acceptTip="*仅图片、PDF类型文件可在线预览"
             multiple></Upload>
        </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(form)">没收</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { bankSeizurelist, getTransfer, delTransfer, addTransfer, bankSeizure,getFjList,getListByXhDetail,downLoadFile } from "@/api/system/bzjtable";
  import selectMultiple from '@/views/collect/addSecurity/selectMultiple'
  import Print from '@/utils/print.js'
  import Upload from '@/views/collect/addSecurity/Upload'
  import { tansParams, blobValidate } from "@/utils/ruoyi";
  import { saveAs } from 'file-saver'
  export default {
    name: "Transfertable",
    data() {
        let amount = (rule, value, callback) => {
      if (value) {
        if (!/^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/.test(value)) return callback(new Error('请输入非负数、最多含两位小数'))
        if (value <= 0) return callback(new Error('划拨金额应大于0'))
        if (value > 999999999999.99) return callback(new Error('划拨金额不能超过999999999999.99'))
      } else {
        return callback(new Error('请输入划拨金额'))
      }
      callback()
    }
    let dialogVisible = (rule, val, callback) => {
      if (!val) callback(new Error('请输入手机号'))
      let exp = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/)
      if (!exp.test(val)) {
        return callback(new Error('手机号格式不对'))
      }
      return callback()
    }
    let dialogVisibleFile = (rule, value, callback) => {
      console.log(value?.length, ';');
      if (rule.required) {
        if (value?.length) {
          callback()
        } else {
          return callback(new Error('请选择文件'))
        }
      }
      callback()
    }
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // transfer表格数据
        transferList: [],
        fileList: [],
        flowerList :[],
        clickedRowData: null,
        dialogFormVisible :false,
        dialogFlowerTable : false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        pdfs: false,
        pdfUrl: '',
        wjdz: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ajbh: null,
          ajmc: null,
          sqwsh: null,
          hsr: null,
          xjr: null,
          xb: null,
          csrq: null,
          zz: null,
          hjdz: null,
          dwzw: null,
          lxdh: null,
          sfzh: null,
          ajxz: null,
          sqje: null,
          sqfs: null,
          sqzt: null,
          jkr: null,
          jkrsfz: null,
          dsyhbh: null,
          jnsj: null,
          jnkh: null,
          pzr: null,
          pzsj: null,
          bar: null,
          dwbh: null,
          badw: null,
          sqrq: null,
          sqtfsj: null,
          sqtfr: null,
          msje: null,
          mszt: null,
          msyy: null,
          mswsh: null,
          mspzr: null,
          mspzsj: null,
          mstfr: null,
          msrq: null,
          mstfsj: null,
          msshzt: null,
          mskhzt: null,
          mskhsj: null,
          mskhczr: null,
          thje: null,
          thfs: null,
          thzt: null,
          thrq: null,
          thwsh: null,
          thpzr: null,
          thtfsj: null,
          thshzt: null,
          thshr: null,
          thshsj: null,
          thxm: null,
          thzh: null,
          thkhh: null,
          djzt: null,
          sqdyzt: null,
          djsj: null,
          sqkpzt: null,
          thkpzt: null,
          hbwsh: null,
          hbdw: null,
          hbje: null,
          hbry: null,
          hbrq: null,
          hblxdh: null,
          hbsj: null,
          hbczy: null,
          thtfr: null,
          HBYJ : null,
        },
        // 表单参数
        form: {
        xh : null,
        ajbh : null,  //案件编号
        ajmc : null,//案件名称
        hsr : null,//候审人
        msje :null,//没收金额
        mskhsj : null,//没收日期
        mswsh : null,//没收文书号
        msyy : null,//没收原因
        mskhczr : null,//没收银行扣款操作人
        },
        currentIndex : '',
        // 表单校验
        ruless: {
        msje: [{ required: true, validator: amount, trigger: 'change' }],
        files: [{ required: true, validator: dialogVisibleFile, trigger: 'change' }]
        }
      };
    },
    components: {
    selectMultiple,
    Upload
  },
    created() {
      this.getList();
    },
    methods: {
      /** 查询没收执行列表 */
      getList() {
        this.loading = true;
        bankSeizurelist(this.queryParams).then(response => {
          this.transferList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
       },
        /**双击操作 */
        doubleclick(row,event){
        this.clickedRowData = row;
        this.form.ajbh = this.clickedRowData.ajbh;
        this.form.ajmc = this.clickedRowData.ajmc;
        this.form.hsr = this.clickedRowData.hsr;
        this.form.msje = this.clickedRowData.msje;
        this.form.mskhsj = this.clickedRowData.mskhsj;
        this.form.xh = this.clickedRowData.xh;
        this.form.xjr = this.clickedRowData.xjr;
        this.form.mswsh = this.clickedRowData.mswsh;
        this.form.msyy =this.clickedRowData.msyy;
        this.form.mskhczr =this.clickedRowData.mskhczr;
        this.tit = "没收执行";
        this.open = true;
        },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      gb() {
      this.getList();
    },
      // 表单重置
      reset() {
        this.form = {
          xh: null,
          ajbh: null,
          ajmc: null,
          sqwsh: null,
          hsr: null,
          xjr: null,
          xb: null,
          csrq: null,
          zz: null,
          hjdz: null,
          dwzw: null,
          lxdh: null,
          sfzh: null,
          ajxz: null,
          sqje: null,
          sqfs: null,
          sqzt: null,
          jkr: null,
          jkrsfz: null,
          dsyhbh: null,
          jnsj: null,
          jnkh: null,
          pzr: null,
          pzsj: null,
          bar: null,
          dwbh: null,
          badw: null,
          sqrq: null,
          sqtfsj: null,
          sqtfr: null,
          msje: null,
          mszt: null,
          msyy: null,
          mswsh: null,
          mspzr: null,
          mspzsj: null,
          mstfr: null,
          msrq: null,
          mstfsj: null,
          msshzt: null,
          mskhzt: null,
          mskhsj: null,
          mskhczr: null,
          thje: null,
          thfs: null,
          thzt: null,
          thrq: null,
          thwsh: null,
          thpzr: null,
          thtfsj: null,
          thshzt: null,
          thshr: null,
          thshsj: null,
          thxm: null,
          thzh: null,
          thkhh: null,
          djzt: null,
          sqdyzt: null,
          djsj: null,
          sqkpzt: null,
          thkpzt: null,
          hbwsh: null,
          hbdw: null,
          hbje: null,
          hbry: null,
          hbrq: null,
          hblxdh: null,
          hbsj: null,
          hbczy: null,
          thtfr: null
        };
        this.resetForm("form");
        this.ids = []; 
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        debugger
        this.getList();
      },
      tableCurrentChange(row) {
      // this.form = row
      // this.currentIndex = row?.pIndex
    },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      yul(val) {
        downLoadFile({ wjdz: val.wjdz }).then(async (data) => {
          // if (this.wjdz && this.wjdz.split('.')[1] == 'png' || this.wjdz &&this.wjdz.split('.')[1] == 'jpg' || this.wjdz.split('.')[1] == 'jpeg') {
            const url = window.URL.createObjectURL(data);
            this.pdfUrl = url;//直接用iframe标签
            this.pdfs = true
          // }
        })
      },
      handlexzfj(val) {
        // this.download('/confiscate/forfeitureOfDeposit/downLoadFile', { wjdz: this.form.wjdz }, `role_${new Date().getTime()}.png`)
        downLoadFile({ wjdz: val.wjdz }).then(async (data) => {
          this.$modal.msgSuccess("下载成功");
          const url = window.URL.createObjectURL(data);
          this.pdfUrl = url;//直接用iframe标签
          const isBlob = blobValidate(data);
          if (val.wjdz && val.wjdz.split('.')[1] == 'png' || val.wjdz &&val.wjdz.split('.')[1] == 'jpg' || val.wjdz &&val.wjdz.split('.')[1] == 'jpeg') {
            if (isBlob) {
              const blob = new Blob([data])
              saveAs(blob, `role_${new Date().getTime()}.png`)
            } else {
              const resText = await data.text();
              const rspObj = JSON.parse(resText);
              const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
              Message.error(errMsg);
            }
          } else if (val.wjdz &&val.wjdz.split('.')[1] == 'pdf') {
            // let pdfUrl = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }));
            // window.open(pdfUrl)
            let blob = new Blob([data], { type: 'application/pdf' });
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `pdf下载`    //下载后的文件名，根据需求定义
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          } else {
            const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) // response就是接口返回的文件流
            const objectUrl = URL.createObjectURL(blob)
            const a = document.createElement('a') // 创建a标签
            a.href = objectUrl
            a.download = 'excel下载' // 自定义文件名
            a.click() // 下载文件
            window.URL.revokeObjectURL(objectUrl) // 释放内存
            // link.remove()
          }
          this.dialogFormVisible = false
        })
      },
      // // 多选框选中数据
      handleSelectionChange(selection) {
        if (selection.length > 0) {  
          // 假设我们只关心第一行数据  
          const selectedRow = selection[0];  
          // 填充 form 对象中对应的字段  
          this.form.xh = selectedRow.xh;  
          this.form.ajbh = selectedRow.ajbh;  
          this.form.ajmc = selectedRow.ajmc;  
          this.form.hsr = selectedRow.hsr;  
          this.form.xjr = selectedRow.xjr; 
          this.form.msje = selectedRow.msje;  
          this.form.mskhsj = selectedRow.mskhsj;  
          this.form.mswsh = selectedRow.mswsh;  
          this.form.msyy = selectedRow.msyy;  
          this.form.mskhczr = selectedRow.mskhczr;  
          // 打开对话框  
          // this.open = true;  
          // debugger
          this.ids = selection.map(item => item.xh)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        } else {  
          // 如果没有选中任何行清空form对象
          this.reset(); // 假设你有一个方法来重置 form 对象  
        }  
      },
      handleckfj(row) {
        this.dialogFormVisible = true
        getFjList({ xh: row.xh }).then((res) => {
          this.fileList = res.rows
          this.fileList.forEach((item) => {
            item.typeName = this.dict.type.sys_type.filter((e)=>item.wjlx==e.value)[0].label
          })
        })
  
      },
      handlecklc(row) {
        this.dialogFlowerTable = true
        getListByXhDetail(row.xh,1).then((res) => {
          this.flowerList = res.rows
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs.forms.validate(valid => {
          if (valid) {
              bankSeizure(this.form).then(response => {
                this.$modal.msgSuccess("没收成功");
                this.open = false;
                this.reset();
              });
          } else {
                // 表单验证失败，给出提示信息  
                this.$message.error('没收失败，请上传附件！');  
                return false;  
            }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bzjtable/export', {
          ...this.queryParams
        }, `transfer_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  